<template>
	<view>
		<!-- 数据列表 -->
		<view class="iscardMoney" v-for="(item, index) in baseData" :key="index">
			<view class="iscardItembox">
				<view class="iscardMOneiTEMy">
					<image class="moneyIcon" :src="imageUrl + item.head_img" mode=""></image>
					<view class="iscaredMoney">
						<view class="iscaredMoneyindex">{{ item.nickname }}</view>
						<view class="iscaredMoneyindexTime">{{ item.moneyDate }}</view>
					</view>
				</view>
				<view class="addMoney">
					<view class="addMoneyIndex">+￥{{ item.cashback_amount }}.00</view>
				</view>
			</view>
		</view>

		<!-- 无数据提示 -->
		<view v-if="baseData.length === 0" class="no-data">
			<image src="https://img.js.design/assets/img/66dafcd4c3154e41040205f2.png#04f07b62b993fbf1a7b059a3602a32e4"
				mode=""></image>
			暂无数据
		</view>
	</view>
</template>
<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		imageUrl
	} from '../../config/request/request';
	import {
		GetwithDraDetail,
		GetwithDraData
	} from '../../config/API/shareBack';

	const baseData = ref([]); // 初始值为空数组

	onMounted(async () => {
		try {
			const data = await GetwithDraDetail();
			console.log('分享列表', data);
			baseData.value = data.data || []; // 如果 data.data 为空，设置为空数组
		} catch (error) {
			console.error('请求失败', error);
			baseData.value = []; // 请求失败时设置为空数组
		}
	});
</script>

<style scoped>
	.no-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-top: 150rpx;
		font-size: 28rpx;
		color: #999;

	}

	.no-data image {
		width: 400rpx;
		height: 400rpx;
	}

	.addMoneyWord {
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 32.92rpx;
		color: rgba(102, 102, 102, 1);
	}

	.addMoneyIndex {
		font-size: 30rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 41.16rpx;
		color: rgba(51, 51, 51, 1);
	}

	.iscaredMoneyindexTime {
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 32.92rpx;
		color: rgba(102, 102, 102, 1);
	}

	.iscaredMoneyindex {
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 38.42rpx;
		color: rgba(51, 51, 51, 1);
	}

	.iscaredMoney {
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.moneyIcon {
		width: 64rpx;
		height: 64rpx;
	}

	.iscardMOneiTEMy {
		display: flex;
		align-items: center;
	}

	.iscardItembox {
		border-bottom: 1px solid #f1f1f1;
		height: 100rpx;
		width: 90%;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
		display: flex;
	}

	.iscardMoney {
		height: 120rpx;
		width: 100vw;
		justify-content: center;
		align-items: center;
		display: flex;
	}
</style>